import { Image } from "expo-image";
import { useState } from "react";
import { FlatList, ImageSourcePropType, Platform, Pressable, StyleSheet } from "react-native";

interface EmojiListProps {
    onSelectEmoji: (emoji: ImageSourcePropType) => void;
    onCloseModal: () => void;
}

export default function EmojiList({ onCloseModal, onSelectEmoji }: EmojiListProps) {
    const [emojis] = useState<ImageSourcePropType[]>([
        require('../assets/images/emoji/emoji1.png'),
        require('../assets/images/emoji/emoji2.png'),
        require('../assets/images/emoji/emoji3.png'),
        require('../assets/images/emoji/emoji4.png'),
        require('../assets/images/emoji/emoji5.png'),
        require('../assets/images/emoji/emoji6.png'),
    ]);

    return (
        <FlatList
            horizontal
            showsHorizontalScrollIndicator={Platform.OS === 'web'}
            data={emojis}
            contentContainerStyle={styles.listContainer}
            renderItem={({ item, index }) => (
                <Pressable onPress={() => {
                    onSelectEmoji(item);
                    onCloseModal();
                }}>
                    <Image source={item} key={index} style={styles.image} />
                </Pressable>
            )}
        />
    )
}

const styles = StyleSheet.create({
    listContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        borderTopRightRadius: 10,
        borderTopLeftRadius: 10,
        paddingHorizontal: 20
    },
    image: {
        width: 100,
        height: 100,
        marginRight: 20
    }
})